<?php $this->load->view('navmenu');?>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/prettify/prettify.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/jquery.flot.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/modernizr.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/detectizr.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/template/js/plugins/gmaps/gmaps.js"></script>
         <div class="maincontent">
        	<div class="contentinner content-dashboard">
            	
                <div class="row-fluid">
                	<div class="span12">
                    	<ul class="widgeticons row-fluid">
                        	<li class="one_fifth"><a href="calender.html"><img src="<?php echo base_url();?>assets/template/img/gemicon/calendar.png" alt="" /><span>Go Events</span></a></li>
                            <li class="one_fifth"><a href="#"><img src="<?php echo base_url();?>assets/template/img/gemicon/reports.png" alt="" /><span>Reports</span></a></li>
                            <li class="one_fifth last"><a href="messages.html"><img src="<?php echo base_url();?>assets/template/img/gemicon/mail.png" alt="" /><span>Mail & Chat</span></a></li>
                            <li class="one_fifth"><a href="media.html"><img src="<?php echo base_url();?>assets/template/img/gemicon/archive.png" alt="" /><span>Archives</span></a></li>
                            <li class="one_fifth"><a href="#"><img src="<?php echo base_url();?>assets/template/img/gemicon/location.png" alt="" /><span>Maps</span></a></li>
                        </ul>
                        
                        <br />

                        
                        <div class="row-fluid">
                            <div class="span6">
                                <h4 class="widgettitle ctitle">Overall Progress Project Paket 1</h4>
                                <div class="tabbable tabs-below">
                                <div class="tab-content">
                                <div id="all" class="tab-pane active">
                                <div class="progress progress-success" style="height: 100%;">
                                <div class="bar" style="width: 38%"> Actual</div></div>
                                <div class="progress progress-striped active progress-warning" style="height: 100%;">
                                <div class="bar" style="width: 58%"> Schedule</div>
                                </div>   
                                </div></div><ul class="nav nav-tabs">
                                            <li class="active"><a data-toggle="tab" href="#"><strong>38% To Completing</strong></a></li>
                                    </ul></div><!--plainwidget-->                            
                            </div>
                            <div class="span6">
                                <h4 class="widgettitle ctitle">Overall Progress Project Paket 2</h4>
                                <div class="tabbable tabs-below">
                                <div class="tab-content">
                                <div id="all" class="tab-pane active">
                                <div class="progress progress-success" style="height: 100%;">
                                <div class="bar" style="width: 38%"> Actual</div></div>
                                <div class="progress progress-striped active progress-warning" style="height: 100%;">
                                <div class="bar" style="width: 58%"> Schedule</div>
                                </div>   
                                </div></div><ul class="nav nav-tabs">
                                            <li class="active"><a data-toggle="tab" href="#"><strong>38% To Completing</strong></a></li>
                                    </ul></div><!--plainwidget-->                            
                            </div>
                        </div>

                        <br />
                        <br />


                         <h4 class="widgettitle ctitle">Basic Map</h4>
                        <div class="panel panel-default">
                                
                                <div class="panel-body">
                                    <div class="widgetcontent ">
                            <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                                <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                                    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Map 1</a></li>
                                    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Map 2</a></li>
                                    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Map 3</a></li>
                                </ul>
                                <div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;">
                                    <div class="popin">
                                      <div id="map2" style="width:100%;height:300px;"></div>
                                    </div>
                                </div>
                                <div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
                                    <div class="popin">
                                        <div id="map2" style="width:100%;height:300px;"></div>
                                </div>
                                </div>
                                <div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
                                    <div class="popin">
                                      <div id="map" style="width:100%;height:300px;"></div>
                                    </div>
                                </div>
                            </div><!--#tabs-->
                                </div>
                            </div>

                        <br />


                        <div class="row-fluid">
                            <div class="span8">
                                <div class="row-fluid">
                                    <h4 class="widgettitle ctitle">S-Curve 1</h4>
                                    <div class="widgetcontent">
                                    <div id="chartplace2" style="height:300px;"></div>
                                    </div><!--widgetcontent-->
                                </div>
                                <div class="row-fluid">
                                    <h4 class="widgettitle ctitle">S-Curve 2</h4>
                                    <div class="widgetcontent">
                                    <div id="chartplace2" style="height:300px;"></div>
                                    </div><!--widgetcontent-->
                                </div>
                            </div>
                            <div class="span4">
                                <h4 class="widgettitle ctitle">Progres Pekerjaan</h4>
                                <div class="widgetcontent">
                            <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="height:800px;">
                                <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                                    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Paket 1</a></li>
                                    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Paket 2</a></li>
                                </ul>
                                <div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false">
                                   <p>Works 1</p>
                                        <div class="progress" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 2</p>
                                        <div class="progress progress-info" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-info" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 3</p>
                                        <div class="progress progress-success" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-success" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 4</p>
                                        <div class="progress progress-danger" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-danger" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 5</p>
                                        <div class="progress progress-warning" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-warning" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 6</p>
                                        <div class="progress" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                        <div class="pagination pagination-mini">

                                              <ul>
                                                <li class="disabled"><a>Previous</a></li>
                                                <li class="active"><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">Next</a></li>
                                              </ul>
                                              <br />
                            </div>
                                </div>
                                <div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
                                    <p>Works 1</p>
                                        <div class="progress" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 2</p>
                                        <div class="progress progress-info" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-info" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 3</p>
                                        <div class="progress progress-success" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-success" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 4</p>
                                        <div class="progress progress-danger" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-danger" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 5</p>
                                        <div class="progress progress-warning" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active progress-warning" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                    <p>Works 6</p>
                                        <div class="progress" style="height: 100%;">
                                          <div style="width: 80%;" class="bar">Schedule</div>
                                        </div><!--progress-->
                                        <div class="progress progress-striped active" style="height: 100%;">
                                          <div style="width: 60%;" class="bar">Actual</div>
                                        </div><!--progress-->
                                        <div class="pagination pagination-mini">
                                            
                                              <ul>
                                                <li class="disabled"><a>Previous</a></li>
                                                <li class="active"><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">Next</a></li>
                                              </ul>
                                              <br />
                                          </div>
                                </div>
                            </div><!--#tabs-->
                        </div>
                            </div>
                        </div>

                            <h4 class="widgettitle ctitle">Agenda</h4>
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div id='calendar'></div>
                                </div><!--contentinner-->
                            </div><!--maincontent-->
                    </div><!--span8-->
                </div>
            </div><!--contentinner-->
        </div><!--maincontent-->
		</div>
<script type="text/javascript">
jQuery(document).ready(function(){
								
		// basic chart
		var flash = [[0, 2], [1, 6], [2,3], [3, 8], [4, 5]];
		var html5 = [[0, 5], [1, 4], [2,4], [3, 1], [4, 9], [5, 10], [6, 13]];
        var html = [[0, 4], [1, 3], [2,3], [3, 0], [4, 8], [5, 9], [6, 12]];
			
		function showTooltip(x, y, contents) {
			jQuery('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css( {
				position: 'absolute',
				display: 'none',
				top: y + 5,
				left: x + 5
			}).appendTo("body").fadeIn(200);
		}
	
			
		var plot = jQuery.plot(jQuery("#chartplace2"),
			   [ { data: flash, label: "Actual", color: "#fb6409"}, { data: html5, label: "Schedule", color: "#096afb"}, { data: html, label: "Revised", color: "#00FF00"} ], {
				   series: {
					   lines: { show: true, fill: true, fillColor: { colors: [ { opacity: 0.05 }, { opacity: 0.15 } ] } },
					   points: { show: true }
				   },
				   legend: { position: 'nw'},
				   grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
				   yaxis: { min: 0, max: 15 }
				 });
		
		var previousPoint = null;
		jQuery("#chartplace2").bind("plothover", function (event, pos, item) {
			jQuery("#x").text(pos.x.toFixed(2));
			jQuery("#y").text(pos.y.toFixed(2));
			
			if(item) {
				if (previousPoint != item.dataIndex) {
					previousPoint = item.dataIndex;
						
					jQuery("#tooltip").remove();
					var x = item.datapoint[0].toFixed(2),
					y = item.datapoint[1].toFixed(2);
						
					showTooltip(item.pageX, item.pageY,
									item.series.label + " of " + x + " = " + y);
				}
			
			} else {
			   jQuery("#tooltip").remove();
			   previousPoint = null;            
			}
		
		});
		// calendar
		jQuery('#calendar').datepicker();


});
</script>
<script type="text/javascript">
    var map;
    jQuery(document).ready(function(){
      prettyPrint();
      map = new GMaps({
        div: '#map',
        lat: -12.043333,
        lng: -77.028333,
        click: function(e){
          console.log(e);
        }
      });

      path = [[-12.044012922866312, -77.02470665341184], [-12.05449279282314, -77.03024273281858], [-12.055122327623378, -77.03039293652341], [-12.075917129727586, -77.02764635449216], [-12.07635776902266, -77.02792530422971], [-12.076819390363665, -77.02893381481931], [-12.088527520066453, -77.0241058385925], [-12.090814532191756, -77.02271108990476]];

      map.drawPolyline({
        path: path,
        strokeColor: '#131540',
        strokeOpacity: 0.6,
        strokeWeight: 6
      });
    });
  </script>
  <script type="text/javascript">
    var map;
   jQuery(document).ready(function(){
      map = new GMaps({
        div: '#map2',
        lat: -12.043333,
        lng: -77.028333
      });

      var path = [[-12.040397656836609,-77.03373871559225],
                                    [-12.040248585302038,-77.03993927003302],
                                    [-12.050047116528843,-77.02448169303511],
                                    [-12.044804866577001,-77.02154422636042]];

      polygon = map.drawPolygon({
              paths: path,
              strokeColor: '#BBD8E9',
              strokeOpacity: 1,
              strokeWeight: 3,
              fillColor: '#BBD8E9',
              fillOpacity: 0.6
            });
    });
  </script>
</html>